<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <link rel="stylesheet" href="../../node_modules/xterm/css/xterm.css" />
    <script src="../../node_modules/xterm/lib/xterm.js"></script>
    <script src="../../node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
    <script src="./webssh.js"></script>
    <style>
      html,
      body,
      #terminal {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #2d2e2c;
      }

      .terminal,
      .terminal-container,
      .xterm-screen {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden;
        background-color: #2d2e2c;
      }

      .xterm .xterm-viewport {
        /* see : https://github.com/xtermjs/xterm.js/issues/3564#issuecomment-1004417440 */
        width: initial !important;
        background-color: #2d2e2c;
      }

      /* 确保终端背景色正确 */
      .xterm-rows,
      .xterm-cursor-layer {
        background-color: #2d2e2c;
      }
    </style>
  </head>
  <body>
    <div id="terminal"></div>
    <script>
      openTerminal({
        operate: 'connect',
        ip: '您的ssh的ip',
        port: '您的ssh的端口',
        username: '您的ssh的用户名',
        password: '您的ssh的密码'
      })
      function openTerminal(options) {
        var client = new WSSHClient()
        var term = new Terminal({
          cursorStyle: 'bar',
          cursorBlink: true,
          rightClickSelectsWord: true,
          theme: {
            foreground: '#F8F8F8',
            background: '#2D2E2C',
            cursor: 'help',
            lineHeight: 16
          },
          fontFamily: '"Cascadia Code", Menlo, monospace',
          screenKeys: true,
          useStyle: true,
          allowTransparency: false,
          rendererType: 'dom'
        })

        term.onData((data) => {
          client.sendClientData(data)
        })

        const fitAddon = new FitAddon.FitAddon()
        term.loadAddon(fitAddon)

        term.open(document.getElementById('terminal'))
        // 初始化后立即调整终端大小
        fitAddon.fit()

        // 确保终端背景色正确应用
        document.documentElement.style.backgroundColor = '#2D2E2C'
        document.body.style.backgroundColor = '#2D2E2C'
        document.getElementById('terminal').style.backgroundColor = '#2D2E2C'

        term.writeln('Welcome to \x1b[1;32mYorlg\x1b[0m.')
        term.writeln('This is Web Terminal of Modb;\n')

        //在页面上显示连接中...
        term.write('Connecting...')
        //执行连接操作
        client.connect({
          onError: function (error) {
            //连接失败回调
            term.write('Error: ' + error + '\r\n')
          },
          onConnect: function () {
            //连接成功回调
            client.sendInitData(options)
            // 连接成功后调整终端大小
            resize()
          },
          onClose: function () {
            //连接关闭回调
            term.write('\rconnection closed')
          },
          onData: function (data) {
            console.log(data, 1234)

            //收到数据时回调
            term.write(data)
            // debounce(() => {
            //   resize()
            // }, 1000)()
          }
        })

        const resize = () => {
          // 先调用 fit() 来适应当前容器大小
          fitAddon.fit()

          // 获取当前终端的列数和行数
          const cols = term.cols
          const rows = term.rows

          // 发送调整大小的消息
          client.sendClientData({
            action: 'resize',
            cols: cols,
            rows: rows
          })

          // 确保终端滚动到底部，以显示最新内容
          term.scrollToBottom()
        }

        window.onresize = debounce(() => {
          resize()
          // 确保窗口大小变化时背景色保持正确
          term.setOption('theme', {
            foreground: '#F8F8F8',
            background: '#2D2E2C',
            cursor: 'help',
            lineHeight: 16
          })
        }, 1000)
        function debounce(fn, delay) {
          let timer = null
          return function () {
            clearTimeout(timer)
            timer = setTimeout(() => {
              fn.apply(this, arguments)
            }, delay)
          }
        }
      }
    </script>
  </body>
</html>
